<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>表格隔行变色</title>
    <style type="text/css">
      table {
        border: 1px solid;
        border-collapse: collapse;
      }
    </style>
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
          $("table:eq(0) tr:even").css("background", "red");
          $("table:eq(0) tr:odd").css("background", "blue");

          $("table:eq(1) tr:even").css("background", "green");
          $("table:eq(1) tr:odd").css("background", "yellow");
        })
    </script>
  </head>
  <body>
  <h1>第一个表格</h1>
  <table border="1" width="400px">
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
    </tr>

  </table>
  <h1>第二个表格</h1>
  <table border="1" width="400px">
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
      <td>6</td>
    </tr>

  </table>
  </body>
</html>